<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FTP图片监控</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<!--
		实现功能
		1.日志查看：查看几天的日志信息；
		2.查看统计：已经监控到了多少张照片，每天监控多少，今天有多少张上传，无效图片有多少，错误图片有多少
		3.功能列表
	-->
	<style>
		html,body{width:100%;height:100%;overflow:hidden;padding:0px;margin:0px;}
		.grey-bg{
			background-color:#f2f2f2;
		}
		.wrap{
			min-width:1200px;
			clear:both;
			height:100%;
		}
		.wrap:after{
			content:"\20";
			display:block;
			clear:both;
			font-size:0px;
		}
		.copy{
			position: fixed;
			bottom:10px;
			width:100%;
			text-align:center;
			color:#999;
			font-size:12px;
		}
		.green-bg{
			background-color:#009688;
			color:white;
			height:40px;
			line-height:40px;
			padding:0px 15px;
		}
		.orange-bg{
			background-color: #ff6600;
			color:white;
		}
		.log,.sum{
			display:block;
			height:49%;
			position:relative;
		}
		.log-content{
			position:absolute;
			top:40px;
			bottom:10px;
			left:0px;
			right:0px;
			overflow:auto;
			white-space:pre;
			font-size: 12px;
    		line-height: 20px;
    		color: #14754d;
    		padding:5px 10px;
		}
		.more-log{
			font-size:12px;
			color:white;
			cursor:pointer;
			margin:0px 20px;
		}
		.sum-content{
			position:absolute;
			top:40px;
			bottom:10px;
			left:0px;
			right:0px;
			overflow:auto;
		}
		.sum-content p{
			font-size:30px;
			padding:0px 20px;
			line-height:20px;
		}
		.sum-content p span{
			font-size:40px;
			margin:0px 15px;
			position:relative;
			top:5px;
		}
		span.red{color:red;}
		span.green{color:#009688;}
	</style>
</head>
<body class="grey-bg">
	<div class="wrap">
		<div class="log">
			<div class="log-title green-bg">最近日志信息<span class="more-log">更多日志</span></div>
			<div class="log-content" id="log">{{ log }}</div>
		</div>
		<div class="sum">
			<div class="sum-title green-bg">统计信息</div>
			<div class="sum-content">
				<p>
					监控共计<span class="green">{{all}}</span>张图片
				</p>
				<p>
					今日共计<span class="green">{{today}}</span>张图片
				</p>
				<p>
					失败图片<span class="red">{{error}}</span>张图片
				</p>
			</div>
		</div>
	</div>
	<div class="copy">powered by boyuyun . &copy; 2018 </div>
</body>
</html>
<script type="text/javascript">
	window.onload = function(){
		var log = document.getElementById('log');
		log.scrollTop = log.scrollHeight;
	}
</script>